<template>
  <ul class="vertical-menu">
    <li class="menu-item" v-for="(menu, index) in menus" :key="index" :class="{actived: menu.isShow}">
      <h2 @click="onShowToggle(menu, index)">
        <i class="ico-tit"></i>
        <strong>{{menu.title}}</strong>
        <span></span>
      </h2>
      <ul class="sub-menu" v-show="menu.isShow">
        <router-link tag="li"
          class="sub-menu-item"
          v-for="(item, index) in menu.items"
          :key="index" 
          :to="item.link"
          @click.native="onSubClick([menu, item])">
          <i class="ico-item"></i>
          <strong>{{item.name}}</strong>
        </router-link>
      </ul>
    </li>
  </ul>
</template>

<script>
  import { mapActions, mapMutations } from 'vuex'
  export default {
    props: {
      menus: {
        type: Array,
        default() {
          return [
            {
              title: '交易管理',
              isShow: false,
              items: [
                {name: '普通订单管理', link: '/order'},
                // {name: '拼单订单管理', link: '/order/fight'},
                {name: '发货管理', link: '/order/delivery'},
                {name: '评论管理', link: '/comment'},
                {name: '退款管理', link: '/order/refund'}
              ]
            },
            {
              title: '商品管理',
              isShow: false,
              items: [
                {name: '商品添加', link: '/goods/add'},
                {name: '出售中商品', link: '/goods/sale'},
                {name: '仓库中商品', link: '/goods/store'},
                {name: '违规下架商品', link: '/goods/pulled'},
                {name: '草稿箱商品', link: '/goods/drafts'},
                {name: '审核中商品', link: '/goods/review'},
                {name: '审核不通过商品', link: '/goods/reviewFail'}
              ]
            },
            {
              title: '拼单管理',
              isShow: false,
              items: [
                {name: '发起拼单', link: '/fightAlone/launch'},
                {name: '拼单列表', link: '/fightAlone/fightList'}
              ]
            },
            {
              title: '物流管理',
              isShow: false,
              items: [
                {name: '运费模板设置', link: '/carriage'}
              ]
            },
            {
              title: '店铺装修',
              isShow: false,
              items: [
                {name: 'PC端装修', link: '/adorn/pc'},
                {name: 'wap端装修', link: '/adorn/wap'}
              ]
            },
            {
             title: '账户管理',
              isShow: false,
              items: [
                {name: '银行卡管理', link: '/count'}
              ]
            },
            {
             title: '在线聊天',
              isShow: false,
              items: [
                {name: '在线聊天', link: '/chat'}
              ]
            }
          ]
        }
      }
    },
    data() {
      return {
        activedClass: ''
      }
    },
    methods: {
      ...mapActions(['resetBreads', 'clearAddGoodsInfo', 'setBreads']),
      onShowToggle(menu, index) {
        this.menus.forEach((menu, i) => {
          if (index !== i) {
            menu.isShow = false
          }
        })
        menu.isShow = !menu.isShow
      },
      onSubClick(item) {
        let breads = []
        item.forEach(v => {
          breads.push({
            name: v.title || v.name,
            link: v.link || '#'
          })
        })
        this.clearAddGoodsInfo()
        this.setBreads(breads)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .vertical-menu {
    position: fixed;
    left: 0;
    top: 83px;
    bottom: 0;
    // z-index: 12;
    width: 222px;
    color: #bfcbd9;
    background: #fff;
    border-right: 1px solid #d8d8d8;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .menu-item {
    &:first-child .ico-tit {
      background-position: -20px 0;
    }  
    &:nth-child(2) .ico-tit {
      background-position: -20px -20px;
    }
    &:nth-child(3) .ico-tit {
      background-image: url('../../assets/btn_collections.png');
      background-size: 16px;
      background-position: center center;
    } 
    &:nth-child(4) .ico-tit {
      background-position: -20px -40px;
    }     
    &:nth-child(5) .ico-tit {
      background-position: -20px -60px;
    }
    &:nth-child(6) .ico-tit {
      background-image: url('../../assets/btn_card.png');
      background-size: 16px;
      background-position: center center;
    }
    &:nth-child(7) .ico-tit {
      background-image: url('../../assets/btn_liaotian.png');
      background-size: 16px;
      background-position: center center;
    }
    // 选中样式
    &:first-child.actived {
      .ico-tit {
        background-position: 0 0;
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }  
    &:nth-child(2).actived {
      .ico-tit {
        background-position: 0 -20px;
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }  
    &:nth-child(3).actived {
      .ico-tit {
        background-image: url('../../assets/btn_collections_hl.png');
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }
    &:nth-child(4).actived {
      .ico-tit {
        background-position: 0 -40px;
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }
    &:nth-child(5).actived {
      .ico-tit {
        background-position: 0 -60px;
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }
    &:nth-child(6).actived {
      .ico-tit {
        background-image: url('../../assets/btn_card_hl.png');
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }
    &:nth-child(7).actived {
      .ico-tit {
        background-image: url('../../assets/btn_liaotian_hl.png');
      }
      h2 {
        background: $color-main;
        strong {
          color: #fff;
        }
        span {
          background-image: url('../../assets/ico_arrow_down_white.png');
        }
      }
    }
    h2 {
      height: 46px;
      line-height: 46px;
      font-weight: 500;
      background: #fff;
      font-size: 0;
      cursor: pointer;
      .ico-tit {
        display: inline-block;
        margin: 0 14px;
        width: 20px;
        height: 20px;
        background-image: url('./ico_sidemenu.png');
        background-size: 40px 80px;
        background-repeat: no-repeat;
        vertical-align: middle;
      }
      strong {
        color: $color-dark;
        font-size: 14px;
        vertical-align: middle;
      }
      span {
        display: inline-block;
        width: 9px;
        height: 7px;
        margin-left: 78px;
        background-image: url('../../assets/ico_arrow_down_gray.png');
        vertical-align: middle;
      }
    }
  }
  .sub-menu {
    background: #f5f5f5;
  }
  .sub-menu-item {
    height: 46px;
    font-size: 14px;
    line-height: 46px;
    cursor: pointer;
    color: $color-dark;
    border-bottom: 1px solid #ebebeb;
    &.router-link-active {
      background: #ededed;
    }
    .ico-item {
      float: left;
      width: 48px;
      height: 46px;
      vertical-align: middle;
      background: url('../../assets/ico_arrow_down_gray.png') no-repeat 18px center;
      background-size: 9px 7px;
      transform: rotate(-90deg);
    }
    &:hover {
      background: #ededed;
    }
  }
</style>